<template>
  <div>
    <div>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>聊天</span>
          </div>
        </template>
        <div class="message-content" ref="messagediv">
          <div v-if="userMessageList.length">
            <div v-for="item in userMessageList" :class="item.userName == userName ? 'right-user':'left-user'">
              <div class="avatar">
                <div :class="item.userName == userName ? 'right-avatar':'left-avatar'">
                  <div>{{item.userName}}</div>
                  <div>
                    <el-avatar :style="item.userName == userName ? 'margin-left: 7px':'margin-right: 7px'" :size="30" :src="item.avatarPic" />
                  </div>
                </div>
              </div>
              <div class="content">
                <div v-if="item.userName != userName" class="default">

                </div>
                <div class="message">
                  <div class="char-message-content">
                    {{item.message}}
                  </div>
                </div>
                <div v-if="item.userName == userName" class="default">

                </div>
              </div>
            </div>
          </div>
        </div>
        <el-divider />
        <el-input
            :disabled="isJY"
            v-model="messageContent"
            :autosize="{ minRows: 3, maxRows: 4 }"
            type="textarea"
            placeholder="请输入内容"
        />
        <div style="margin-top: 20px;text-align: right">
          <el-button :disabled="!messageContent" @click="sendMessage">发送</el-button>
        </div>
      </el-card>
    </div>

  </div>
</template>

<script>
import {computed, ref, nextTick, onBeforeUnmount,onUnmounted,watch} from 'vue'
import TIM from "tim-js-sdk";
import GenerateTestUserSig from "../../../debug/GenerateTestUserSig";
import {defineComponent} from "vue";
import {ElMessage} from 'element-plus'

export default defineComponent({
  props:{
    videoGroupId:{
      type:String,
      default:''
    }
  },
  setup(props,{emit}) {
    const userID = localStorage.getItem('userImid');
    const isJY = ref(false);
    const messagediv = ref(null)

    const messageContent = ref('');

    const userMessageList = ref( [])

    const {userSig} = GenerateTestUserSig(userID)

    const avatarPic = computed(() => localStorage.getItem('avatarPic'))
    const userName = computed(() => localStorage.getItem('userName'))

    // 创建 SDK 实例，TIM.create() 方法对于同一个 SDKAppID 只会返回同一份实例
    let options = {
      SDKAppID: 1400668788 // 接入时需要将0替换为您的即时通信应用的 SDKAppID

    }
    let tim = TIM.create(options) // SDK 实例通常用 tim 表示

    watch(() =>props.videoGroupId,() =>{
      console.log('本地数据',props.videoGroupId)
      userMessageList.value = JSON.parse(localStorage.getItem('messageContent'+props.videoGroupId)) || [];
      nextTick(() =>{
        messagediv.value.scrollTo({
          top: 240,
          //滚动过渡效果
          // behavior: "smooth"
        });
      })
    })

    //初始化
    let onSdkReady = function (event) {
      console.log('初始化-------------------')
      //腾讯im设置头像
      let setHeadPortrait = tim.updateMyProfile({
        nick: localStorage.getItem('userName'),
        avatar: localStorage.getItem('avatarPic')
      });
      setHeadPortrait.then(function (imResponse) {
      }).catch(function (imError) {
        console.warn('updateMyProfile error:', imError); // 更新资料失败的相关信息
      });

      //匿名用户加入（无需登录，入群后仅能接收消息）
      console.log('群组id',props.videoGroupId)
      let joinGroupPromise = tim.joinGroup({ groupID: props.videoGroupId, type: TIM.TYPES.GRP_AVCHATROOM });
      joinGroupPromise.then(function(imResponse) {
        switch (imResponse.data.status) {
          case TIM.TYPES.JOIN_STATUS_WAIT_APPROVAL:
            break; // 等待管理员同意
          case TIM.TYPES.JOIN_STATUS_SUCCESS: // 加群成功
            console.log('加群成功',imResponse.data.group); // 加入的群组资料
            let getGroupMemberList = tim.getGroupMemberList({ groupID: props.videoGroupId, count: 15, offset: 0 }); // 从 0 开始拉取 15 个群成员
            getGroupMemberList.then(function(imResponse) {
              console.log('群成员列表',imResponse.data.memberList); // 群成员列表
            }).catch(function(imError) {
              console.warn('getGroupMemberList error:', imError);
            });
            break;
          case TIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP: // 已经在群中
              console.log('已在群中')
            break;
          default: break;
        }
      }).catch(function(imError){
        console.warn('joinGroup error:', imError); // 申请加群失败的相关信息
      });

    };
    tim.on(TIM.EVENT.SDK_READY, onSdkReady);

    // tim.setLogLevel(1) // 普通级别，日志量较多，接入时建议使用

    // 设置 SDK 日志输出级别，详细分级请参考 setLogLevel 接口的说明
    const _handleTextMsg = function (message) {
      console.log('message',message)
      if(message.from === 'administrator'){
        onSdkReady();
        emit('loadingVideo');
        return
      }
      let arr =  {
        'userName':message.nick ? message.nick : message.from == 'administrator' ? '管理员':'未知用户',
        'avatarPic':message.avatar ? message.avatar:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
        'message':message.from === 'administrator' ? JSON.parse(message.payload.text).message ? JSON.parse(message.payload.text).message : '加载中...' :message.payload.text
      }
      userMessageList.value.push(arr)
      try {
        let mess = JSON.parse(localStorage.getItem('messageContent'+props.videoGroupId)) || [];
        if(mess.length >=100){
          console.log('进入')
          mess.shift()
        }
        mess.push(arr)
        localStorage.setItem('messageContent'+props.videoGroupId,JSON.stringify(mess))
        nextTick(() => {
          messagediv.value.scrollTo({
            top: messagediv.value.scrollHeight,
            //滚动过渡效果
            // behavior: "smooth"
          });
        });
      }catch (e) {

      }
      // 详细数据结构请参考 TextPayload 接口的说明
      console.log('文本消息内容', message.payload.text) // 文本消息内容
    }
    const _handleCustomMsg = function (message) {
      // 详细数据结构请参考 CustomPayload 接口的说明
      console.log('收到自定义消息',message.payload)
    }
    const _handleGroupTip = function (message) {
      // 详细数据结构请参考 GroupTipPayload 接口的说明
      switch ('GroupTipPayload',message.payload.operationType) {
        case TIM.TYPES.GRP_TIP_MBR_JOIN: // 有成员加群
          break
        case TIM.TYPES.GRP_TIP_MBR_QUIT: // 有群成员退群
          break
        case TIM.TYPES.GRP_TIP_MBR_KICKED_OUT: // 有群成员被踢出群
          break
        case TIM.TYPES.GRP_TIP_MBR_SET_ADMIN: // 有群成员被设为管理员
          break
        case TIM.TYPES.GRP_TIP_MBR_CANCELED_ADMIN: // 有群成员被撤销管理员
          break
        case TIM.TYPES.GRP_TIP_GRP_PROFILE_UPDATED: // 群组资料变更
          //从v2.6.0起支持群组自定义字段变更内容
          // message.payload.newGroupProfile.groupCustomField
          break
        case TIM.TYPES.GRP_TIP_MBR_PROFILE_UPDATED: // 群成员资料变更，例如群成员被禁言
          console.log('兼听禁言')
          break
        default:
          break
      }
    }
    const _handleGroupSystemNotice = function (message) {
      // 详细数据结构请参考  GroupSystemNoticePayload 接口的说明
      //console.log(message.payload.userDefinedField) // 用户自定义字段。使用 RESTAPI 发送群系统通知时，可在该属性值中拿到自定义通知的内容。
      // 用 REST API 发送群系统通知请参考 在群组中发送系统通知 API
      // console.log('message------------',message)
    }
    const _handMessageContent = function (event) {
      // console.log('消息接收-------------')
      // 收到推送的单聊、群聊、群提示、群系统通知的新消息，可通过遍历 event.data 获取消息列表数据并渲染到页面
      // event.name - TIM.EVENT.MESSAGE_RECEIVED
      // event.data - 存储 Message 对象的数组 - [Message]
      const length = event.data.length
      // console.log('存储 Message 对象的数组',event.data)
      let message
      for (let i = 0; i < length; i++) {
        // Message 实例的详细数据结构请参考 Message
        // 其中 type 和 payload 属性需要重点关注
        // 从v2.6.0起，AVChatRoom 内的群聊消息，进群退群等群提示消息，增加了 nick（昵称） 和 avatar（头像URL） 属性，便于接入侧做体验更好的展示
        // 前提您需要先调用 updateMyProfile 设置自己的 nick（昵称） 和 avatar（头像 URL），请参考 updateMyProfile 接口的说明
        message = event.data[i]
        switch (message.type) {
          case TIM.TYPES.MSG_TEXT:
            // 收到了文本消息
            _handleTextMsg(message)
            break
          case TIM.TYPES.MSG_CUSTOM:
            // 收到了自定义消息
            _handleCustomMsg(message)
            break
          case TIM.TYPES.MSG_GRP_TIP:
            // 收到了群提示消息，如成员进群、群成员退群
            _handleGroupTip(message)
            break
          case TIM.TYPES.MSG_GRP_SYS_NOTICE:
            // 收到了群系统通知，通过 REST API 在群组中发送的系统通知请参考 在群组中发送系统通知 API
            _handleGroupSystemNotice(message)
            break
          default:
            break
        }
      }
    }

    tim.on(TIM.EVENT.MESSAGE_RECEIVED, _handMessageContent)

    const sendMessage = () => {
      // 发送文本消息，Web 端与小程序端相同
      // 1. 创建消息实例，接口返回的实例可以上屏
      let message = tim.createTextMessage({
        to: props.videoGroupId,
        conversationType: TIM.TYPES.CONV_GROUP,
        // 消息优先级，用于群聊（v2.4.2起支持）。如果某个群的消息超过了频率限制，后台会优先下发高优先级的消息，详细请参考 消息优先级与频率控制
        // 支持的枚举值：TIM.TYPES.MSG_PRIORITY_HIGH, TIM.TYPES.MSG_PRIORITY_NORMAL（默认）, TIM.TYPES.MSG_PRIORITY_LOW, TIM.TYPES.MSG_PRIORITY_LOWEST
        priority: TIM.TYPES.MSG_PRIORITY_NORMAL,
        payload: {
          text: messageContent.value
        }
      })

      let getGroupProfile = tim.getGroupProfile({ groupID: props.videoGroupId});
      console.log('群id',props.videoGroupId)
      getGroupProfile.then(function(imResponse) {
        console.log('群资料',imResponse.data.group.muteAllMember);
        if(imResponse.data.group.muteAllMember === 'Off'){
          // 2. 发送消息
          let sendMessagePromise = tim.sendMessage(message)
          sendMessagePromise.then(function (imResponse) {
            // 发送成功
            console.log('发送成功', imResponse);
            let arr = {
              'userName':localStorage.getItem('userName'),
              'avatarPic':localStorage.getItem('avatarPic'),
              'message':messageContent.value
            }
            console.log('userMessageList.value',userMessageList.value)
            // userMessageList.value.push(arr)
            try {
              let mess = JSON.parse(localStorage.getItem('messageContent'+props.videoGroupId)) || [];
              if(mess.length >=5){
                console.log('进入')
                mess.shift()
              }
              mess.push(arr)
              localStorage.setItem('messageContent'+props.videoGroupId,JSON.stringify(mess))
              userMessageList.value = mess
              console.log(messagediv)
              nextTick(() => {
                messagediv.value.scrollTo({
                  top: messagediv.value.scrollHeight,
                });
              });
            }catch (e) {

            }
            messageContent.value = '';
          }).catch(function (imError) {
            // 发送失败
            console.warn('sendMessage error:', imError.code)
            if(imError.code == '10017'){
              ElMessage.error('您已被管理员禁言')
            }
            messageContent.value = ''
          })
        }else if(imResponse.data.group.muteAllMember === 'On'){
          ElMessage.error('该直播间已被全员禁言')
          messageContent.value = ''
        }else{

        }
      }).catch(function(imError) {
        console.warn('getGroupProfile error:', imError); // 获取群详细资料失败的相关信息
      });
    }

    //腾讯im登录
    let TenXunLogin = tim.login({userID: userID, userSig: userSig});
    TenXunLogin.then(function (imResponse) {
      console.log('登陆成功', imResponse.data); // 登录成功
    }).catch(function (imError) {
      console.warn('login error:', imError); // 登录失败的相关信息
    });

    //卸载
    onBeforeUnmount(() =>{
      let quitGroupPromise = tim.quitGroup(props.videoGroupId);
      quitGroupPromise.then(function(imResponse) {
        console.log('退群成功',imResponse.data.groupID); // 退出成功的群 ID
      }).catch(function(imError){
        console.warn('quitGroup error:', imError); // 退出群组失败的相关信息
      });

      let logoutPromise = tim.logout();
      logoutPromise.then(function(imResponse) {
        console.log('登出成功',imResponse.data); // 登出成功
      }).catch(function(imError) {
        console.warn('logout error:', imError);
      });

    })
    onUnmounted(() =>{
      tim.destroy();
    })
    return {
      isJY,
      messagediv,
      userMessageList,
      avatarPic,
      userName,
      messageContent,
      sendMessage
    }
  }
})


</script>
<style>
/*定义滑块 样式*/
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  height: 100px;    /* 滚动条滑块长度 */
  background-color: #ccc;
}
::-webkit-scrollbar {
  width: 3px;   /* 滚动条宽度， width：对应竖滚动条的宽度  height：对应横滚动条的高度*/
}
</style>

<style scoped>
.left-user,.right-user{
  width: 100%;
  margin-bottom: 20px;
}
.message-content{
  width: 100%;
  height: 240px;
  overflow-y: scroll;
}
.left-user .avatar{
  display: flex;
}
.right-user .avatar{
  display: flex;
  justify-content: flex-end;
}
.avatar{
  display: flex;
  align-items: center;
}
.avatar span{
  font-size: 14px;
}
.avatar,.content{
  width: 100%;
}
.left-user .content{
  display: flex;
}
.right-user .content{
  display: flex;
  justify-content: flex-end;
}
.content > .default{
  width: 30px;
}
.left-avatar{
  display: flex;
  flex-direction:row-reverse;
  align-items: center;
}
.right-avatar{
  display: flex;
  align-items: center;
}
.char-message-content{
  padding: 5px 10px;
  line-height: 14px;
  border: 1px solid gainsboro;
  font-size: 14px;
  border-radius: 5px;
  word-break: break-all;
}
</style>